<template>
  <div class="schedule">
    <Nav backTitle="我的课表" />
    <div
      class="refresh"
      id="refresh"
    >
      <img src="../assets/img/refresh-white.png" />
    </div>

    <SelectStudent
      :dataList="studentList"
      :currentSelect="currentStudent"
      @changeSelect="changeStudent"
    ></SelectStudent>

    <div class="schedule-date">
      <p>
        <svg
          class="iconFont left"
          aria-hidden="true"
        >
          <use xlink:href="#icon-ce1"></use>
        </svg>
        <span id="start"></span>
        <svg
          class="iconFont right"
          aria-hidden="true"
        >
          <use xlink:href="#icon-ce"></use>
        </svg>
      </p>
    </div>
    <table
      cellpadding="0"
      cellspacing="0"
      width="100%"
      id="calendar"
      class="schedule-table"
    >
      <tr>
        <th>周一</th>
        <th>周二</th>
        <th>周三</th>
        <th>周四</th>
        <th>周五</th>
        <th>周六</th>
        <th>周日</th>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    <!-- <div id="display"></div> -->
    <div id="border"></div>
  </div>
</template>

<script>
import Nav from 'components/nav/nav.vue'
import locationImg from '../assets/img/location-gray.png'
import api from 'util/xhr'
import SelectStudent from 'components/select/select.vue'
import { mapState, mapActions } from 'vuex'

export default {
  components: {
    Nav,
    SelectStudent
  },
  data() {
    return {
      title: '提示',
      showName: '',
      showId: ''
    }
  },
  computed: {
    ...mapState({
      studentList: state => {
        return state.studentList
      },
      currentStudent: state => {
        return state.currentStudent
      }
    })
  },
  mounted() {
    if (this.studentList.length > 0) {
      this.init()
    } else {
      this.loadStudent().then(() => {
        this.showId = this.currentStudent.studentId
        this.init()
      })
    }
  },
  methods: {
    ...mapActions({
      loadStudent: 'loadStudent'
    }),
    changeStudent({ studentId, studentName }) {
      this.courseList = []
      this.showId = studentId
      this.showName = studentName
      this.init()
    },
    init() {
      var _this = this
      var now = new Date(),
        year = now.getFullYear(),
        month = now.getMonth() + 1,
        getDayOfFirstDateOfAMonth = function(month, year) {
          var date = new Date()
          date.setFullYear(year)
          date.setMonth(month - 1)
          date.setDate(1)
          return date.getDay()
        },
        getDateNumberOfAMonth = function(month, year) {
          var dateNumbers = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
          if (month != 2) {
            return dateNumbers[month - 1]
          } else {
            // if (year % 4 == 0) {
            if (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0)) {
              return 29
            } else {
              return 28
            }
          }
        }
      var calandar = {
        tdList: (function() {
          var list = []
          for (var i = 0, length = $('td').length; i < length; i++) {
            list.push($('td').get(i))
          }
          return list
        })(),
        render: function(month, year) {
          console.log(month, year)
          console.log(_this.studentId)
          $('td').html('')
          $('#start').html(year + '年' + month + '月')
          var that = this
          api
            .post('/api/m/u/schedule', {
              dateString: year + '-' + (month >= 10 ? month : '0' + month),
              studentId: _this.showId
            })
            .then(
              data => {
                console.log(data)
                var courseList = data,
                  i = getDayOfFirstDateOfAMonth(month, year) - 1,
                  i = i < 0 ? 6 : i
                for (
                  var length = i + getDateNumberOfAMonth(month, year),
                    counter = 1;
                  i < length;
                  i++, counter++
                ) {
                  var isToday = false,
                    html

                  // 判断是否今天
                  if (
                    now.getFullYear() === year &&
                    now.getMonth() + 1 === month &&
                    now.getDate() === counter
                  ) {
                    isToday = true
                  }
                  html = `<em ${
                    isToday ? 'class="today"' : ''
                  }>${counter}</em><div class="container">`

                  courseList.map(function(course) {
                    var courseTime = new Date(new Number(course.classDate))
                    // 判断课程是否属于这一天
                    if (
                      courseTime.getFullYear() === year &&
                      courseTime.getMonth() + 1 === month &&
                      courseTime.getDate() === counter
                    ) {
                      html += `<p class="mits" data-time="${
                        course.studyingTime
                      }" data-address="${course.campusName +
                        course.roomName}"><i class="table-name">${
                        course.className
                      }</i></p>`
                    }
                  })
                  console.log(that.tdList[i])
                  that.tdList[i].innerHTML = html + '</div>'
                }
              },
              desc => {
                _this.$alert({ content: desc })
              }
            )
        }
      }
      calandar.render(month, year)

      function resetTable() {
        $('tr').css({ marginBottom: 0 })
        $('td').css('background-color', 'white')
        $('#border').hide()
        // $('#display').hide();
      }
      $('.left').click(function() {
        month--
        if (month < 1) {
          month = 12
          year--
        }
        resetTable()
        calandar.render(month, year)
      })
      $('.right').click(function() {
        month++
        if (month > 12) {
          month = 1
          year++
        }
        resetTable()
        calandar.render(month, year)
      })
      var border = $('#border'),
        // display = $('#display'),
        activeTd
      var infoDiv = $('<div style=""></div>')
        .css({ position: 'absolute', bottom: '0', left: 0, padding: '10px' })
        .addClass('info-div')
      console.log('infoDiv', infoDiv)
      //回归样式
      resetTable()
      $('td').click(function(event) {
        resetTable()
        var ps = $(this).find('p')
        console.log(ps)
        if (ps.length) {
          activeTd = this
          var box = this.getBoundingClientRect()
          this.style['background-color'] = 'rgb(245,245,245)'
          //	调整边框
          border.css({
            width: box.width + 'px',
            height: box.height + 1 + 'px',
            top: box.top - 1 + 'px',
            left: box.left - 1 + 'px'
          })
          border.show()

          // 调整展示板
          var html = ''
          for (var i = 0, length = ps.length; i < length; i++) {
            var course = ps.get(i)
            html += `
                            <div class="item" style="text-align:left;">
                                <div class="time ">
                                </div>
                                <div class="className" style="color:#333;"><span >${
                                  course.dataset.time.split('-')[0]
                                }</span> ~ <span style="margin-right:1rem;">${
              course.dataset.time.split('-')[1]
            }</span>${course.textContent} </div>
                                <div class="address" style="display:${
                                  course.dataset.address == null
                                    ? 'inline-block'
                                    : 'none'
                                }">
                                <img  src="${locationImg}"></img>${
              course.dataset.address
            }</div>
                            </div>`
          }
          infoDiv.html(html)
          $('tr').css({ marginBottom: 0 })
          $(this).append(infoDiv)
          $(this)
            .parent()
            .css({ marginBottom: infoDiv.height() + 22 }) //22:上下间距10+10
          console.log(infoDiv.height())
          infoDiv.css({ bottom: 0 - infoDiv.height() - 14 })
        } else {
          activeTd = null
        }
      })

      $(window).on('scroll', function() {
        if (activeTd) {
          var box = activeTd.getBoundingClientRect()
          border.css({
            width: box.width + 'px',
            height: box.height + 1 + 'px',
            top: box.top - 1 + 'px',
            left: box.left - 1 + 'px'
          })
        }
      })

      $('#refresh').click(function() {
        window.location.reload()
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.selectStudent {
  width: 100%;
  height: 96px;
  padding: 0 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
}
.selectTxt {
  font-size: 28px;
}
.schedule {
  font-size: 28px;
  padding-top: 110px;
  background: rgb(248, 248, 248);
  height: 100%;
}
.refresh {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 111;
  padding: 25px 25px 10px 25px;
}
.schedule-date {
  font-size: 36px;
  color: #31b5e7;
  text-align: center;
  height: 100px;
  line-height: 100px;
  .iconFont {
    font-size: 30px;
    color: #31b5e7;
    width: 30px;
    height: 30px;
    vertical-align: inherit;
  }
  .left {
    margin-right: 10px;
  }
  .right {
    margin-left: 10px;
  }
}
.refresh img {
  width: 33px;
}
.schedule-table {
  table-layout: fixed;
}

.schedule-table th {
  border-right: 2px solid #f2f2f2;
  border-bottom: 2px solid #f2f2f2;
  flex: 1;
  -webkit-box-flex: 1;
  color: #31b5e7;
  font-weight: bold;
  height: 100px;
  line-height: 100px;
  border-top: 2px solid #f2f2f2;
}

.schedule-table td {
  background: #fff;
  display: inline-block;
  width: 108px;
  min-height: 122px;
  padding: 10px 0;
  flex: 1;
  -webkit-box-flex: 1;
  border-right: 2px solid #f2f2f2;
  border-bottom: 2px solid #f2f2f2;
  text-align: center;
  vertical-align: top;
}
.schedule-table td .info-div {
  padding: 10px 0;
}
.schedule-table tr {
  position: relative;
  display: flex;
  display: -webkit-flex;
}
.info-div {
  text-align: left;
}
.schedule-table td .item {
  text-align: left;
  .className {
    text-align: left;
  }
  .address {
    text-align: left;
  }
}
.schedule-table td p {
  height: 40px;
  line-height: 40px;
}
.student-select {
  position: relative;
  height: 80px;
  width: 100%;
}
.select-student {
  height: 80px;
  line-height: 80px;
  font-size: 28px;
  color: #000;
  /* margin-bottom: 2rem; */
  background: white;
  padding: 0 30px;
  border-bottom: 1px solid #e8e8e8;
  position: fixed;
  width: 100%;
  box-sizing: border-box;
  z-index: 1;
}

.student-list {
  display: inline-block;
  float: right;
  height: 50px;
  border-radius: 50px;
  line-height: 50px;
  margin-top: 15px;
  box-sizing: border-box;
  color: #383838;
}
.student-list-mask {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1;
  top: 17.2rem;
}
.student-list-ul {
  padding: 24px 15px 10px 30px;
  background: #fff;
  &:after {
    content: '';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
  }
  li {
    width: 22.86%;
    height: 70px;
    line-height: 70px;
    text-align: center;
    color: #383838;
    font-size: 24px;
    background: #f6f6f6;
    border-radius: 3px;
    float: left;
    margin-right: 2%;
    margin-bottom: 15px;
  }
  .selected {
    background: #3271f1;
    color: #fff;
  }
}

.student-list span {
  padding: 0 14px 0 30px;
  position: relative;
  display: inline-block;
  min-width: 50px;
}

.student-list img {
  margin-right: 20px;
  width: 20px;
  position: relative;
  top: -2px;
  transition: transform 0.3s;
  -webkit-transition: transform 0.3s;
}
.student-list .down {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

.student-list ul {
  position: absolute;
  width: 100%;
  left: 15%;
  top: 4.4rem;
  text-align: center;
  background: white;
  z-index: 1;
  border: 2px solid #47c2c9;
  border-top: 0;
  max-height: 300px;
  overflow-y: scroll;
}

.student-list ul em {
  display: inline-block;
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 5%;
  height: 100%;
  border-top: 2px solid #eee;
}
</style>
<style>
table.schedule-table .container {
  width: 100%;
}

table.schedule-table i.table-name {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  font-size: 24px;
}

table.schedule-table .mits {
  background-color: #c4e4f3;
  margin: 2px 0;
  width: 100%;
}

table.schedule-table #display {
  position: fixed;
  border: 1px solid #7ccbea;
  display: none;
  width: 100%;
  left: 0;
  /*padding-bottom: 50px;*/
  background-color: rgb(245, 245, 245);
}

table.schedule-table #border {
  border: 1px solid #7ccbea;
  position: fixed;
  border-bottom-color: rgb(245, 245, 245);
  display: none;
}
table.schedule-table .today {
  color: #ffffff;
  background: #fed265;
  border-radius: 10px;
  padding: 0px 8px;
}
table.schedule-table #display .item {
  margin: 44px 0;
  border-left: 6px solid #00b7ed;
}
table.schedule-table #display .item .time {
  display: inline-block;
  margin-left: 40px;
  color: #999999;
}
table.schedule-table #display .item .className {
  display: inline-block;
  position: relative;
  top: -8px;
  left: 80px;
  color: #343434;
  font-weight: 400;
  font-size: 28px;
  width: 30%;
  /*overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;*/
  line-height: 28px;
}
table.schedule-table #display .item .address {
  display: inline-block;
  position: relative;
  right: 30px;
  float: right;
  top: 16px;
  font-size: 28px;
  line-height: 28px;
  color: #a7a7a7;
  width: 30%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
table.schedule-table #display .item .address img {
  position: relative;
  top: 5px;
  margin-right: 10px;
}
</style>
